<%@ page import="pojo.User" %>
<jsp:include page="common.jsp"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Welcome Page</title>
    <style>
        /* 样式代码保持不变 */
        .header {
            background-color: #28a745;
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .header .logout {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #dc3545;
        }

        .content-container {
            margin: 20px auto;
            display: flex;
            justify-content: center;
        }

        .card {
            width: 18rem;
            margin: 20px;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: 0.3s;
        }

        .card:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .card-body {
            padding: 20px;
            text-align: center;
        }

        .card-title {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .card-text {
            font-size: 16px;
            margin-bottom: 20px;
        }

        .btn {
            background-color: #28a745;
            color: white;
        }

        .btn:hover {
            background-color: #218838;
            color: white;
        }

        .footer {
            background-color: #f8f9fa;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<%
    User user = (User) request.getAttribute("user");

%>
<div class="header">
    <h1 class="display-4">欢迎</h1>
    <p class="lead">当前登录用户：[ <span style="color: red"><%= user.getUsername() %></span> ]</p> <!-- 替换为实际的登录用户信息 -->
    <p class="logout"><a href="javascript:void(0);" onclick="logout()" class="btn">退出</a></p>
    <p class="change-password"><a href="javascript:void(0);" onclick="showChangePasswordModal()"
                                  class="btn btn-warning">修改密码</a></p>
</div>

<div class="content-container">
<c:if test="${user.getRoleType() == '1'}">
    <div class="card" style="width: 18rem;"   >
        <div class="card-body">
            <h5 class="card-title">信息后台</h5>
            <p class="card-text">管理您的网站信息和数据。</p>
            <a href="admin.jsp" target="_blank" class="btn btn-primary">进入后台</a>
        </div>
    </div>
</c:if>
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">展示前台</h5>
            <p class="card-text">查看和展示网站内容。</p>
            <a href="front.jsp" target="_blank" class="btn btn-primary">进入前台</a>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    <p>&copy; 2024 Your Company. All rights reserved.</p>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePasswordModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changePasswordModalLabel">修改密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="changePasswordForm">
                    <div class="form-group">
                        <label for="oldPassword">旧密码</label>
                        <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                               required>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function logout() {
        // 清除 ajax异步调用logout清session会话信息
        $.ajax({
            url: '/user?operation=logout',
            type: 'POST',
            success: function (response) {
                console.log(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });

        // 清除 rememberMe cookie
        document.cookie = "rememberMe=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        // 重定向到登录页面
        window.location.href = 'login.jsp'; // 替换为实际的登录页面 URL
    }

    function showChangePasswordModal() {
        $('#changePasswordModal').modal('show');
    }

    $(document).ready(function () {
        $('#changePasswordForm').on('submit', function (event) {
            event.preventDefault();
            var oldPassword = $('#oldPassword').val();
            var newPassword = $('#newPassword').val();
            var confirmPassword = $('#confirmPassword').val();

            if (newPassword !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }

            $.ajax({
                url: '/user?operation=changePassword',
                type: 'POST',
                data: {
                    username: '<%= user.getUsername() %>',
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
                success: function (response) {
                    if (response.code === 200) {
                        alert('密码修改成功');
                        $('#changePasswordForm')[0].reset();
                        $('#changePasswordModal').modal('hide');
                    } else {
                        alert(response.msg);
                    }
                },
                error: function () {
                    alert('密码修改失败，请稍后重试');
                }
            });
        });
    });
</script>

</body>
</html>
